<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考试管理-统一安排-学生考试分布</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content{
            background-color: white;
            border-radius: 5px;
            padding: 14px;
        }
        .table-search-fieldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }

    </style>
</head>
<body>
<div class="div-content">
    <!--搜索条件查询-->
    <form class="layui-form layui-form-pane" action="" id="form-search">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 90px">考试日期</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" id="examtime" name="examtime" autocomplete="off" class="layui-input" placeholder="请选择日期">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 60px">机房</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <select id="room" name="roomaddr">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 60px">校区</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <select name="campus">
                            <option value="">请选择</option>
                            <option value="1">花津校区</option>
                            <option value="2">赭山校区</option>
                            <option value="3">天门山校区</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 80px">课程名</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <select id="course" name="cname">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                        <i class="layui-icon layui-icon-search"></i>
                        搜索
                    </button>
                    <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        清空条件
                    </button>
                </div>
            </div>
        </fieldset>
    </form>

    <!--表格显示-->
    <table id="table-booklist" lay-filter="table-booklist-filter"></table>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}" charset="utf-8"></script>
<script th:src="@{/layui_exts/excel.js}" charset="utf-8"></script>
<script type="text/html" id="table-book-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteAll">全部删除</button>
    </div>
</script>
<script th:inline="javascript">
    layui.use(['laydate','layer','form','tree', 'util','table'],function () {
        var laydate = layui.laydate;
        var form=layui.form;
        var layer=layui.layer;
        var $=layui.$;
        var tree = layui.tree;
        var util = layui.util;
        var table=layui.table;
        // var excel = layui.excel;

        //时间选择器
        laydate.render({
            elem:'#examtime'
        });

        //点击清空条件时刷新页面
        $("#btn-reset").click(function () {
            window.location.reload()
        });

        //加载机房地址
        var roomAddr=[[${roomAddr}]]
        for(let i=0;i<roomAddr.length;i++){
            $("#room").append(
                '<option value="'+roomAddr[i]+'">'+roomAddr[i]+'</option>'
            )
        }
        //加载课程名
        var course=[[${cname}]]
        for(let i=0;i<course.length;i++){
            $("#course").append(
                '<option value="'+course[i]+'">'+course[i]+'</option>'
            )
        }
        form.render();

        //加载页面时机房列表表格渲染
        table.render({
            elem: '#table-booklist'
            ,url: '/showArrangeStu' //数据接口
            ,page: true //开启分页
            ,toolbar:"#table-book-toolbar"
            ,limits:[6,8,10,20]
            ,cols: [
                [   //表头
                    {type:"checkbox",width: 70, rowspan:2},
                    {field: 'examId', title: '考生编号',width:170,align:'center'},
                    {field: 'stuName', title: '姓名',width:100,align:'center'},
                    {field: 'campus', title: '校区', width:120,align:'center',
                        templet:function (d) {
                            if(d.campus=='1') return '花津校区';
                            if(d.campus=='2') return '赭山校区';
                            if(d.campus=='3') return '天门山校区';
                        }
                    },
                    {field: 'etype', title: '课程名',width:130,align:'center'},
                    {field: 'examDate', title: '考试日期',width:130,align:'center'},
                    {field: 'estartTime', title: '开始',width:130,align:'center'},
                    {field: 'eendTime', title: '结束',width:130,align:'center'},
                    // {field: '', title: '考试场次',width:175,align:'center',
                    //     templet:function (d) {
                    //         return d.estartTime+"-"+d.eendTime;
                    //     }
                    // },
                    {field: 'roomAddr', title: '考场地址',width:250,align:'center'},
                ]
            ],
            defaultToolbar:[
                "filter","print",{
                    title:"导出",
                    layEvent:"LAYTABLE_EXCEL",
                    icon:"layui-icon-table"
                }
            ]
        });

        //监听表单提交（根据搜索条件查询机房）
        form.on('submit(btn-search-filter)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let substr="";
            let arr={"examtime":data.field.examtime, "roomaddr":data.field.roomaddr,"campus":data.field.campus,"cname":data.field.cname};
            console.log(arr);
            for(let i in arr){
                if(arr[i]===""||arr[i]===undefined){delete arr[i]}
            }
            for(let j in arr){substr+="&"+j+"="+arr[j];}
            substr=substr.substring(1);
            console.log(substr)

            table.render({
                elem: '#table-booklist'
                ,url: '/showArrangeStu?'+substr //数据接口
                ,page: true //开启分页
                ,toolbar:"#table-boo k-toolbar"
                ,limits:[6,8,10,20]
                ,cols: [
                    [   //表头
                        {type:"checkbox",width: 70, rowspan:2},
                        {field: 'examId', title: '考生编号',width:170,align:'center'},
                        {field: 'stuName', title: '姓名',width:100,align:'center'},
                        {field: 'campus', title: '校区', width:120,align:'center',
                            templet:function (d) {
                                if(d.campus=='1') return '花津校区';
                                if(d.campus=='2') return '赭山校区';
                                if(d.campus=='3') return '天门山校区';
                            }
                        },
                        {field: 'etype', title: '课程名',width:130,align:'center'},
                        {field: 'examDate', title: '考试日期',width:130,align:'center'},
                        {field: 'estartTime', title: '开始',width:130,align:'center'},
                        {field: 'eendTime', title: '结束',width:130,align:'center'},
                        // {field: '', title: '考试场次',width:175,align:'center',
                        //     templet:function (d) {
                        //         return d.estartTime+"-"+d.eendTime;
                        //     }
                        // },
                        {field: 'roomAddr', title: '考场地址',width:250,align:'center'},
                    ]
                ],
                defaultToolbar:[
                    "filter","print",{
                        title:"导出",
                        layEvent:"LAYTABLE_EXCEL",
                        icon:"layui-icon-table"
                    }
                ]
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //表格头部工具栏监听（删除）
        table.on('toolbar(table-booklist-filter)', function(obj){
            if(obj.event==="LAYTABLE_EXCEL"){  //导出为Excel表格
                $.ajax({
                    url: "/export/estudent", //后端接口
                    dataType:'json',
                    success:function (res) {
                        // console.log(res.data)
                        // table.exportFile('table-booklist',res.data,'xlsx');  //导出函数调用
                        for(let i=0;i<res.data.length;i++){
                            if(res.data[i].campus==1){
                                res.data[i].campus="花津校区";
                            }else if(res.data[i].campus==2){
                                res.data[i].campus="赭山校区";
                            }else if(res.data[i].campus==3){
                                res.data[i].campus="天门山校区";
                            }
                        }
                        let data1=res.data;
                        let data2=res.data.filter(item=>(item.campus!="赭山校区"&&item.campus!="天门山校区"));
                        let data3=res.data.filter(item=>(item.campus!="花津校区"&&item.campus!="天门山校区"));
                        let data4=res.data.filter(item=>(item.campus!="花津校区"&&item.campus!="赭山校区"));

                        //导出4张表，第一个是总表，洪个是每个校区的表
                        data1.unshift({examId:'考生编号',stuName:'姓名',campus:'校区',etype:'课程名称',examDate:'考试日期',roomAddr:'考场地址'});
                        var a1=LAY_EXCEL.filterExportData(data1,[
                            'examId','stuName','campus','etype','examDate','estartTime','eendTime','roomAddr'
                        ]);
                        data2.unshift({examId:'考生编号',stuName:'姓名',campus:'校区',etype:'课程名称',examDate:'考试日期',roomAddr:'考场地址'});
                        var a2=LAY_EXCEL.filterExportData(data2,[
                            'examId','stuName','campus','etype','examDate','estartTime','eendTime','roomAddr'
                        ]);
                        data3.unshift({examId:'考生编号',stuName:'姓名',campus:'校区',etype:'课程名称',examDate:'考试日期',roomAddr:'考场地址'});
                        var a3=LAY_EXCEL.filterExportData(data3,[
                            'examId','stuName','campus','etype','examDate','estartTime','eendTime','roomAddr'
                        ]);
                        data4.unshift({examId:'考生编号',stuName:'姓名',campus:'校区',etype:'课程名称',examDate:'考试日期',roomAddr:'考场地址'});
                        var a4=LAY_EXCEL.filterExportData(data4,[
                            'examId','stuName','campus','etype','examDate','estartTime','eendTime','roomAddr'
                        ]);
                        var colConf=LAY_EXCEL.makeColConfig({'A':110,'H':180},100);
                        var mergeConf = LAY_EXCEL.makeMergeConfig([
                            ['E1', 'G1']
                        ]);
                        LAY_EXCEL.setExportCellStyle( a1,'A1:H'+a1.length+1, {
                            s: {
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
                            return newCell;
                        } );
                        LAY_EXCEL.setExportCellStyle(a4,'A1:H'+a4.length+1, {
                            s: {
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
                            return newCell;
                        } );
                        LAY_EXCEL.setExportCellStyle(a2,'A1:H'+a2.length+1, {
                            s: {
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
                            return newCell;
                        } );
                        LAY_EXCEL.setExportCellStyle(a3,'A1:H'+a3.length+1, {
                            s: {
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
                            return newCell;
                        } );
                        LAY_EXCEL.exportExcel({
                            sheet1:a1,
                            sheet2:a2,
                            sheet3:a3,
                            sheet4:a4,
                        },'1.xlsx','xlsx',{
                            extend:{
                                '!cols':colConf,
                                '!merges': mergeConf
                            }
                        });
                    }
                });
            }else if(obj.event=="deleteAll"){
                layer.confirm('您确认删除所有学生考试吗?', {icon: 3, title:'删除确认'}, function(index){
                    // 异步请求，删除数据
                    $.ajax({
                        url:"/stu/deleteAll",
                        success:function (response) {
                            if(response.state==200){
                                layer.msg(response.message,{
                                    icon: 1,
                                    time: 1000
                                },function () {
                                    $("#btn-reset").click();
                                });
                            }else {
                                layer.alert(response.message,{icon:2,anim:6});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });

    });
</script>
</body>
</html>